<template>
  <!-- 客情任务礼品 -->
  <div :class="$style.gift">
    <ContentWrap>
      <FormContainer :column="4">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="100px">
          <el-form-item prop="giftCode" label="礼物编码">
            <el-input v-model="formData.giftCode" clearable />
          </el-form-item>
          <el-form-item prop="giftName" label="礼物名称">
            <el-input v-model="formData.giftName" clearable />
          </el-form-item>
          <el-form-item prop="seriesName" label="所属系列">
            <el-select v-model="formData.seriesName" multiple collapse-tags clearable filterable>
              <el-option
                v-for="(list, index) in seriesNameOption"
                :key="index"
                :label="list.dictName"
                :value="list.dictCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="scope" label="使用范围">
            <el-select v-model="formData.scope" clearable filterable>
              <el-option
                v-for="(list, index) in scopeOption"
                :key="index"
                :label="list.dictName"
                :value="list.dictCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item :span="24" align="right">
            <Button @click="$refs.form.resetFields()">重置</Button>
            <Button type="primary" enter @click="queryHandle">查询</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
      <div class="button-container" style="padding-top: 0">
        <Button type="primary" @click="$refs.add.openDailog()">新增</Button>
        <Button type="primary" @click="$refs.add.openDailog(tableSelected, 'edit')">编辑</Button>
        <ExportPane :table-config="tableConfig" :data-source="tableSelected" :query-data-fun="queryHandle" filename="礼物管理">导出</ExportPane>
        <Button type="primary" @click="$refs.toUpdate.openDailog()">入库更新</Button>
        <Button type="danger" @click="deleteHandle">删除</Button>
      </div>
      <table-box
        ref="table"
        no-request
        :selected-arry.sync="tableSelected"
        :table-config="tableConfig"
        :other-filters="filterParams"
        @selection-change="(val)=>{tableSelected = val}"
      >
        <el-table-column slot="before" type="selection" align="center" width="50" />
      </table-box>
      <Add ref="add" @confrim="refresh"></Add>
      <ToUpdate ref="toUpdate" :import-data="tableSelected" @confrim="refresh('onPage')"></ToUpdate>
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
import Add from './child/Add'
import ToUpdate from './child/ToUpdate'
import { deepCopy } from '@/utils/'
import { getDictByType } from '@/api/dataDict'
import { ArrayFormat } from '@/utils/params-format'
import { giftdelete, giftDeleteBatch } from '@/api/careGift'
import ExportPane from '@/components/ExportPane'
export default {
  name: 'CareGift',
  components: {
    ContentWrap,
    FormContainer,
    Button,
    Add,
    ToUpdate,
    ExportPane
  },
  data() {
    return {
      searchLoading: false,
      deleteLoading: false,
      dailogType: 'add',
      formData: {
        giftCode: '', // 礼物编码
        giftName: '', // 礼物名称
        seriesName: [], // 所属系列
        scope: '' // 使用范围
      },
      tempData: {},
      formRules: {},
      tableSelected: [], // 表格选中行数据
      seriesNameOption: [],
      scopeOption: [],
      tableConfig: {
        interfacePath: '/call-center/api/v1/careGift/page',
        pageSize: 10,
        pageFlag: true,
        hideFuncBar: true,
        sort: 'createTime',
        order: 'desc',
        // 表格字段动态配置
        setting: [
          {
            label: '序号',
            minWidth: 70,
            align: 'center',
            formatData: (val) => { return val.keyIndex + 1 }
          },
          {
            prop: 'giftCode',
            label: '礼物编码',
            align: 'center',
            minWidth: 100
          },
          {
            prop: 'giftName',
            label: '礼物名称',
            minWidth: 100
          },
          {
            prop: 'seriesName',
            label: '所属系列',
            minWidth: 100,
            propEnum: {
              appCode: 'call-center',
              domainCode: 'marketing',
              dictTypeCode: 'GIFT_SERIES'
            }
          },
          {
            prop: 'scope',
            label: '使用范围',
            minWidth: 160,
            formatData: (val) => {
              if (val.scope) {
                const scopeArr = val.scope.split(',')
                const scopeName = scopeArr.map(k => {
                  return this.findScopeName(k)
                })
                return scopeName.join(',')
              } else {
                return '--'
              }
            }
          },
          {
            prop: 'quantity',
            label: '库存数量',
            minWidth: 100
          },
          {
            prop: 'careCumulative',
            label: '累计使用数量',
            minWidth: 120
          },
          {
            prop: 'cumulative',
            label: '累计入库数量',
            minWidth: 120
          },
          {
            prop: 'newQuantity',
            label: '最新入库数量',
            minWidth: 120
          },
          // {
          //   prop: 'updaterName',
          //   label: '最新入库操作人',
          //   minWidth: 140
          // },
          // {
          //   prop: '',
          //   label: '最新入库操作时间',
          //   minWidth: 150
          // },
          {
            prop: 'createrName',
            label: '创建人',
            minWidth: 90
          },
          {
            prop: 'createTime',
            label: '创建时间',
            minWidth: 140
          },
          {
            prop: 'updaterName',
            label: '最后编辑人',
            minWidth: 110
          },
          {
            prop: 'lastUpdateTime',
            label: '最后编辑时间',
            minWidth: 140
          }
        ]
      },
      filterParams: []
    }
  },
  created() {
    this.getDictInfo({ type: 'giftseries', dictTypeCode: 'GIFT_SERIES' }) // 所属系列
    this.getDictInfo({ type: 'scope', dictTypeCode: 'GIFT_USABLE_RANGE' }) // 使用范围
  },
  methods: {
    // 获取数据字典
    getDictInfo({ type, dictTypeCode }) {
      const params = { dictTypeCode: dictTypeCode, appCode: 'call-center', domainCode: 'marketing' }
      getDictByType(params).then(res => {
        const data = res.data || []
        if (type === 'giftseries') this.seriesNameOption = data
        if (type === 'scope') this.scopeOption = data
      })
    },
    // 查找使用范围对应值
    findScopeName(dictCode) {
      const dictNameObj = this.scopeOption.find(item => {
        return item.dictCode === dictCode
      })
      if (typeof dictNameObj === 'object') {
        return dictNameObj.dictName || ''
      }
    },
    // 根据条件查询
    queryHandle(type) {
      return this.$refs.form
        .validate()
        .then(() => {
          const params = deepCopy(this.formData)
          // params.seriesName = params.seriesName.join(',')
          // params.scope = params.scope.join(',')
          params.seriesName = `[${params.seriesName.join(',')}]`
          this.filterParams = [...ArrayFormat(params, { giftCode: '=', seriesName: 'in', scope: '=' })]
          if (type !== 'import') {
            this.refresh()
          }
          return params
        })
    },
    edit() {

    },
    // 批量删除
    deleteHandle() {
      if (this.tableSelected.length <= 0) {
        this.$message.warning('请选择要删的礼物！')
        return
      }
      return this.$msgbox({
        title: '提示',
        type: 'warning',
        message: '确定删除所选礼物？',
        showCancelButton: true
      }).then(() => {
        if (this.tableSelected.length > 1) {
          return giftDeleteBatch(this.tableSelected.map(e => e.id))
        } else {
          return giftdelete(this.tableSelected[0].id)
        }
      }).then(res => {
        this.$message.success('删除成功！库存数量已更新为零！')
        this.refresh()
      })
    },
    toUpdate() {

    },
    // 刷新表格
    refresh() {
      this.$refs.table.initTableData()
    }
  }
}
</script>
<style lang='scss' module>
.gift{
  tr {
    background-color: white !important;
  }
}
</style>
